<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LeafletJS加载ArcGIS/ESRI地图 - 优吉斯(YouGIS)</title>
    <link href="../lib/leaflet/leaflet.css" rel="stylesheet" />
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/leaflet/leaflet.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      #location {
        position: fixed;
        padding: 5px;
        left: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 999;
        font-size: 12px;
        font-weight: bold;
        color: blue;
        border-top-right-radius: 5px;
        /* width: 255px; */
      }

      #mapdiv {
        width: 100vw;
        height: calc(100vh - 156px);
      }

      #promptInfo {
        z-index: 999;
        position: absolute;
        color: red;
        font-size: large;
        font-weight: bold;
        margin-left: 80px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <iframe src="../yougis.html" style="width: 100vw; height: 156px"></iframe>
    <div id="mapdiv">
        <div id="promptInfo"></div>
    </div>
    <div id="location"></div>
    <script>
      L.tileLayer.amap = function (option) {
        option = option || {};
        var layer;
        switch (option.layer) {
          //全球影像
          case "img":
          default:
            layer = L.tileLayer(
              "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
              {
                name: option.name,
              }
            );
            break;
          // 全球地形
          case "ter":
            layer = L.tileLayer(
              "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}",
              {
                name: option.name,
              }
            );
            break;
          // 全球晕渲图
          case "hillshade":
            layer = L.tileLayer(
              "https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}",
              {
                name: option.name,
              }
            );
            break;
            //全球晕渲图(黑色)
            case "hillshade_dark": 
            layer = L.tileLayer(
              "https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade_Dark/MapServer/tile/{z}/{y}/{x}",
              {
                name: option.name,
              }
            );
            break;
        }
        return layer;
      };

      let img = new L.tileLayer.amap({ layer: "img", name: "矢量图" });
      let ter = new L.tileLayer.amap({ layer: "ter", name: "影像图"  });
      let hillshade = new L.tileLayer.amap({ layer: "hillshade", name: "影像注记"  });
      let hillshade_dark = new L.tileLayer.amap({ layer: "hillshade_dark", name: "影像图(含注记)"  });

      $(document).ready(function () {
        var options = {
          center: [31.24, 121.50],
          zoom: 15, // initial zoom of map
          layers: [img],
        };
        var map = L.map("mapdiv", options);
        L.marker([31.24, 121.50])
          .addTo(map)
          .bindTooltip("上海东方明珠")
          .openTooltip();

        const baseLayers = {
          全球影像: img,
          全球地形: ter,
          全球晕渲图: hillshade,
          "全球晕渲图(黑色)": hillshade_dark,
        };

        // 添加图层控制控件
        L.control.layers(baseLayers).addTo(map);

        // 设置初始显示内容
        let initInfo = "请通过右上角图层控制切换地图, 点击地图左下角展示坐标<br/>";
        initInfo += "当前选择地图：" + img.options.name + "<br/>";
        initInfo += "服务地址：" + img._url;
        document.getElementById("promptInfo").innerHTML = initInfo;
        
        // 图层切换事件, 设置显示的提示信息
        map.on('baselayerchange', function(e) {
            let info = "请通过右上角图层控制切换地图, 点击地图左下角展示坐标<br/>";
            info += "当前选择地图：" + e.name + "<br/>";
            if (e.layer._url) {
                info += "服务地址：" + e.layer._url; 
            } else if (e.layer._layers) {
                for (k in e.layer._layers) {
                    let v = e.layer._layers[k]
                    info += "服务地址" + k + "：" + v._url + "<br/>"; 
                }
            }
            document.getElementById("promptInfo").innerHTML = info;
        });

        map.on("click", (e) => {
          let lnglat = "鼠标点击位置坐标：" + e.latlng.lng + " , " + e.latlng.lat;
          $("#location")[0].innerText = lnglat;
        });
        window.map = map;
      });
    </script>
  </body>
</html>
